<template>
  <div>
    <transition name="app1">
      <router-view />
    </transition>
  </div>
</template>
<script>
import store from './store'
export default {
  store,
  data: vm => ({
    delay: 500
  }),
  mounted () {
    window.onload = vm => {
      this.$store.state.is = true
    }
    window.onresize = () => {
      this.debounce() // 页面 resize 事件 防抖处理
      // this.setResize() // 不做处理
    }
  },
  methods: {
    setResize () {
      this.$store.state.width = document.documentElement.clientWidth
      this.$store.state.height = document.documentElement.clientHeight
    },
    debounce: (() => {
      let timer = null // 借助闭包
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(this.setResize, this.delay) // 简化写法
      }
    })()
  }
}
</script>
<style scoped>
* ::-webkit-scrollbar-track-piece {
  background-color: #09114C;
}
* ::-webkit-scrollbar {
  width: 4px;
  height: 0px;
}
* ::-webkit-scrollbar-thumb {
  border-radius: 20px !important;
  background-color: #2239E4;
  background-clip: padding-box;
  min-height: 10px;
}
* ::-webkit-scrollbar-thumb:hover {
  background-color: #2239E4;
}
</style>
<style>
/* 切换动画 */
.app-enter-active,
.app-leave-active {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 0.5s;
  background: rgba(0, 0, 0, 0);
  z-index: 9999;
}
.app-enter {
  transform: translateX(0%);
  opacity: 0;
}
.app-leave-to {
  transform: translateX(0%);
}
@import url('./assets/css/xCommon.css');
</style>
